﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>
<!-- 代办事项 -->
<!-- 1.文本框里面输入内容，按下回车，就可以生成代办事项 -->
<!-- 2.点击代办事项复选框，就可以把当前数据添加到已完成事项里面 -->
<!-- 3.自己完成事项复选框，就可以把当前数据添加到代办事项里面 -->
<!-- 4.注意本页面内容刷新页面不会丢失 -->

<!-- 分析 -->
<!-- 1.页面刷新不丢失数据，本地存储localStorage -->
<!-- 2.核心思路：不管按回车，还是点击复选框，都是把本地储存的数据加载到页面中，这样保证页面刷新关闭不丢失数据 -->
<!-- 3.存储的数据格式：var todolist = [{title:'xxx',done:false}] -->
<!-- 4.注意1：本地存储localStorage里面只能存储字符串格式，因此需要把数组对象转换为字符串 JSON.stringify(data) -->
<!-- 5.注意2：获取本地存储的数据 需要把里面的字符串数据转换为 对象格式 JSON.parse(data) -->

<!-- 按下回车把心数据添加到本地存储里 -->
<!-- 1.切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以要把数据保存到本地存储里 -->
<!-- 2.利用事件对象 .keyCode判断用户按下回车键（ASCII码：13） -->
<!-- 3.声明一个数组，保存数据 -->
<!-- 4.先要读取本地储存原来的数据（声明函数getData()）,放到这个数组里面 -->
<!-- 5.之后把最新的表单获取过来的数据，追加到数组里面 -->
<!-- 6.最后把数组存储给本地存储（声明函数saveData()） -->

<!-- todolist本地存储数据渲染加载到页面 -->
<!-- 1.因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用 -->
<!-- 2.先要读取本地存储数据。（数据要转换为对象格式） -->
<!-- 3.之后遍历这个数据（$.each()）,有几条数据，就生成几个li放到ol中 -->
<!-- 4.每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据 -->

<!-- todolist删除操作 -->
<!-- 1.点击里面a链接，不是删除li，而是删除本地存储对应的数据 -->
<!-- 2.核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li -->
<!-- 3.可以给链接自定义属性记录当前的索引号 此时不能用index(),因为不是兄弟关系，拿不到索引号-->
<!-- 4.根据这个索引号删除相关的数据，数组的splice(i,1)方法 -->
<!-- 5.存储修改后的数据，然后存储给本地存储 -->
<!-- 6.重新渲染加载数据列表 -->
<!-- 7.因为a是动态创建的，使用on方法绑定事件 -->

<!-- todolist正在进行和已完成选项操作 -->
<!-- 1.当点击里小的复选框，修改本地存储数据，再重新渲染数据列表 -->
<!-- 2.点击之后,获取本地存储数据 -->
<!-- 3.修改对应数据属性done为当前复选框的checked状态 -->
<!-- 4.之后保存数据到本地存储 -->
<!-- 5.重新渲染加载数据列表 -->
<!-- 6.load加载函数里面,新增一个条件,如果当前数据的done为true就是已经完成的,就把列表渲染加载到ul中 -->
<!-- 7.如果当前done为false,则是待办事项,就把列表渲染到ol中 -->

<!-- // todolist统计正在进行个数和已经完成个数 -->
<!-- 1.在load函数里面操作 -->
<!-- 2.声明2个变量：todoCount待办个数，doneCount已完成个数 -->
<!-- 3.当进行遍历本地存储数据时候，如果done为false，则todoCount++，否则doneCount++ -->
<!-- 4.最后修改相应元素text() -->

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2021 todolist.cn
    </footer>



    <!-- <script>
        $(function () {
            var todolist = [
                {
                    title: '代办1',
                    done: false
                },
                {
                    title: '代办2',
                    done: false
                }];
            // localStorage.setItem("todo", todolist);
            // 1.本地存储里面只能存储字符串的数据格式 把数组对象转换为字符串格式 JSON.stringify()
            localStorage.setItem("todo", JSON.stringify(todolist));
            var data = localStorage.getItem("todo");
            // console.log(typeof data);
            // console.log(data[0].title);
            // 2.获取本地存储的数据 需要把里面的字符串数据转换为 对象格式 JSON.parse()
            data = JSON.parse(data);
            console.log(data);
            console.log(data[0].title);
        })
    </script> -->
</body>

</html>